package com.eliza.base.views.learn.animation

import androidx.compose.animation.graphics.ExperimentalAnimationGraphicsApi
import androidx.compose.animation.graphics.res.animatedVectorResource
import androidx.compose.animation.graphics.res.rememberAnimatedVectorPainter
import androidx.compose.animation.graphics.vector.AnimatedImageVector
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import com.eliza.base.R

/*
* AnimatedVectorDrawable 文件格式
将 ImageVector 与 Compose 动画 API 结合使用，如这篇 Medium 文章中所述
使用 Lottie 等第三方解决方案
* */
object AnimationVectorsX {
    @Composable
    fun Show() {
        var statex by remember {
            mutableIntStateOf(0)
        }
        Column {
            Button(onClick = {
                statex = statex.plus(1) % 2
            }) {
                Text(text = "click to change$statex")
            }
            when (statex) {
                0 -> AnimatedVectorDrawableX()
            }
        }
    }

    @OptIn(ExperimentalAnimationGraphicsApi::class)
    @Composable
    private fun AnimatedVectorDrawableX(modifier: Modifier = Modifier) {
        val image = AnimatedImageVector.animatedVectorResource(R.drawable.ic_android_black_24dp)
        var atEnd by remember { mutableStateOf(false) }
        Image(
            painter = rememberAnimatedVectorPainter(image, atEnd),
            contentDescription = "Timer",
            modifier = Modifier.clickable {
                atEnd = !atEnd
            },
            contentScale = ContentScale.Crop
        )
    }
}